<template>
  <div class="login">
    <div class="app-name flex-center"><img src="../assets/image/guohui.png" />智能监室交互终端管理</div>
    <svg data-v-317c94cf="" xmlns="http://www.w3.org/2000/svg" width="500" height="380" viewBox="0 0 897.318 556.975">
      <path
        fill="#f2f2f2"
        d="m217.339 502.047.998-22.434a72.46 72.46 0 0 1 33.795-8.555c-16.231 13.27-14.203 38.85-25.207 56.696a43.58 43.58 0 0 1-31.96 20.14l-13.583 8.317a73.03 73.03 0 0 1 15.393-59.18 70.5 70.5 0 0 1 12.965-12.045c3.253 8.578 7.599 17.06 7.599 17.06"
      ></path>
      <path fill="#cacaca" d="M796.921 36.552H164.598a1.016 1.016 0 0 1 0-2.03h632.324a1.016 1.016 0 0 1 0 2.03"></path>
      <ellipse cx="186.953" cy="11.169" fill="#3f3d56" rx="10.925" ry="11.169"></ellipse>
      <ellipse cx="224.695" cy="11.169" fill="#3f3d56" rx="10.925" ry="11.169"></ellipse>
      <ellipse cx="262.437" cy="11.169" fill="#3f3d56" rx="10.925" ry="11.169"></ellipse>
      <path
        fill="#3f3d56"
        d="M774.304 2.768h-26.81a2.03 2.03 0 0 0 0 4.06h26.81a2.03 2.03 0 0 0 0-4.06m0 7.62h-26.81a2.03 2.03 0 0 0 0 4.06h26.81a2.03 2.03 0 0 0 0-4.06m0 7.61h-26.81a2.03 2.03 0 0 0 0 4.06h26.81a2.03 2.03 0 0 0 0-4.06m-117.591 98.143h-434.01a8.07 8.07 0 0 0-8.07 8.06v204.87a8.08 8.08 0 0 0 8.07 8.07h434.01a8.077 8.077 0 0 0 8.06-8.07v-204.87a8.07 8.07 0 0 0-8.06-8.06"
      ></path>
      <path fill="#589ff8" d="M542.073 214.842a8.07 8.07 0 0 0-8.06 8.06v57.87a8.077 8.077 0 0 0 8.06 8.07h122.7v-74Z"></path>
      <path fill="#589ff8" d="M871.088 288.837h-329.01a8.076 8.076 0 0 1-8.067-8.066v-57.868a8.075 8.075 0 0 1 8.067-8.066h329.01a8.075 8.075 0 0 1 8.066 8.066v57.868a8.076 8.076 0 0 1-8.066 8.066" opacity=".5"></path>
      <circle cx="586.571" cy="255.537" r="13.089" fill="#fff"></circle>
      <path fill="#fff" d="M860.894 251.734H624.38a3.898 3.898 0 1 1 0-7.796h236.514a3.898 3.898 0 1 1 0 7.796m-89.831 15.401H624.38a3.898 3.898 0 1 1 0-7.795h146.683a3.898 3.898 0 0 1 0 7.795"></path>
      <path fill="#ffb6b6" d="m151.406 545.537 11.328-.001 5.389-43.693h-16.719z"></path>
      <path fill="#2f2e41" d="M148.517 541.838h3.188l12.449-5.062 6.671 5.061h.001a14.22 14.22 0 0 1 14.217 14.217v.462l-36.526.001Z"></path>
      <path fill="#ffb6b6" d="m49.051 530.809 10.139 5.053 24.314-36.701-14.963-7.458z"></path>
      <path
        fill="#2f2e41"
        d="m48.115 526.21 2.854 1.422 13.4 1.022 3.712 7.507h.001a14.22 14.22 0 0 1 6.382 19.066l-.206.413-32.69-16.292Zm108.31-179.114-72.026 1.88 1.253 35.073s-1.253 9.395 1.252 11.9 3.758 2.505 2.506 6.89-4.491 46.273-4.491 46.273-29.562 52.27-28.31 53.522 2.506 0 1.253 3.132-2.505 1.879-1.252 3.132a46 46 0 0 1 3.131 3.757h20.416s1.142-6.263 1.142-6.889 1.252-4.384 1.252-5.01 35.67-38.418 35.67-38.418l7.515-62.631 18.163 61.378s0 53.863 1.253 55.116 1.252.626.626 3.132-3.132 1.878-1.253 3.757 2.505-1.252 1.88 1.88l-.627 3.13 24.062.27s2.506-5.28 1.253-7.159-1.178-1.366.35-4.44 2.155-3.702 1.529-4.328-.626-3.958-.626-3.958-9.031-123.183-9.031-125.062a6.25 6.25 0 0 1 .52-2.818v-2.55l-2.4-9.038Z"
      ></path>
      <path fill="#589ff8" d="M869.68 238.348a27.638 27.638 0 1 1 27.638-27.638 27.64 27.64 0 0 1-27.638 27.638"></path>
      <path fill="#fff" d="M880.586 207.984h-8.18v-8.18a2.726 2.726 0 0 0-5.452 0v8.18h-8.179a2.726 2.726 0 1 0 0 5.452h8.18v8.18a2.726 2.726 0 0 0 5.452 0v-8.18h8.179a2.726 2.726 0 1 0 0-5.452"></path>
      <path fill="#589ff8" d="M447.883 289.212h-105.01a8.08 8.08 0 0 0-8.07 8.07v39.86h121.14v-39.86a8.077 8.077 0 0 0-8.06-8.07"></path>
      <path fill="#589ff8" d="M447.88 401.212H342.87a8.076 8.076 0 0 1-8.067-8.067v-95.867a8.075 8.075 0 0 1 8.067-8.067h105.01a8.075 8.075 0 0 1 8.066 8.067v95.867a8.076 8.076 0 0 1-8.066 8.067" opacity=".5"></path>
      <circle cx="373.808" cy="321.563" r="13.089" fill="#fff"></circle>
      <path fill="#fff" d="M426.131 354.547h-61.514a3.898 3.898 0 1 1 0-7.795h61.514a3.898 3.898 0 1 1 0 7.795M394.3 369.95h-29.683a3.898 3.898 0 0 1 0-7.797H394.3a3.898 3.898 0 0 1 0 7.796"></path>
      <path fill="#589ff8" d="M340.68 429.348a27.638 27.638 0 1 1 27.638-27.638 27.64 27.64 0 0 1-27.638 27.638"></path>
      <path fill="#fff" d="M351.586 398.984h-8.18v-8.18a2.726 2.726 0 1 0-5.452 0v8.18h-8.179a2.726 2.726 0 1 0 0 5.452h8.18v8.18a2.726 2.726 0 1 0 5.452 0v-8.18h8.179a2.726 2.726 0 1 0 0-5.452"></path>
      <path fill="#589ff8" d="M327.887 228.266h-105.01a8.076 8.076 0 0 1-8.067-8.066v-95.867a8.075 8.075 0 0 1 8.067-8.067h105.01a8.075 8.075 0 0 1 8.066 8.067V220.2a8.076 8.076 0 0 1-8.066 8.066"></path>
      <circle cx="253.816" cy="156.618" r="13.089" fill="#589ff8"></circle>
      <path fill="#589ff8" d="M306.139 185.602h-61.514a3.898 3.898 0 1 1 0-7.795h61.514a3.898 3.898 0 1 1 0 7.795m-31.831 15.402h-29.683a3.898 3.898 0 1 1 0-7.796h29.683a3.898 3.898 0 1 1 0 7.796"></path>
      <path fill="#589ff8" d="M327.887 228.266h-105.01a8.076 8.076 0 0 1-8.067-8.066v-95.867a8.075 8.075 0 0 1 8.067-8.067h105.01a8.075 8.075 0 0 1 8.066 8.067V220.2a8.076 8.076 0 0 1-8.066 8.066" opacity=".5"></path>
      <circle cx="253.816" cy="156.618" r="13.089" fill="#fff"></circle>
      <path fill="#fff" d="M306.139 185.602h-61.514a3.898 3.898 0 1 1 0-7.795h61.514a3.898 3.898 0 1 1 0 7.795m-31.831 15.402h-29.683a3.898 3.898 0 1 1 0-7.796h29.683a3.898 3.898 0 1 1 0 7.796"></path>
      <circle cx="225.043" cy="115.951" r="21" fill="#ff6584"></circle>
      <path fill="#ccc" d="M282.67 555.785a1.186 1.186 0 0 1-1.19 1.19H1.19a1.19 1.19 0 0 1 0-2.38h280.29a1.187 1.187 0 0 1 1.19 1.19"></path>
      <path fill="#ffb6b6" d="M220.555 171.576a9.77 9.77 0 0 1-5.759 12.435 9.6 9.6 0 0 1-1.635.451l-5.547 33.96-13.01-12.013 7.262-30.407a9.806 9.806 0 0 1 8.59-10.76 9.55 9.55 0 0 1 10.099 6.334"></path>
      <path fill="#3f3d56" d="M124.54 248.524s10.098-13.341 46.74-12.976l20.797-7.556 4.753-43.57 16.636 3.96-2.377 53.87-35.648 20.596-46.739 9.506Z"></path>
      <circle cx="119.175" cy="198.983" r="21.747" fill="#ffb6b6" data-name="ab6171fa-7d69-4734-b81c-8dff60f9761b"></circle>
      <path
        fill="#3f3d56"
        d="M82.367 363.878a.4.4 0 0 1-.114-.016c-.401-.112-.719-.2.73-12.73l1.564-9.903-1.526-8.744-2.568-2.568 4.127-4.127 3.463-9.838-5.993-8.88-6.875-36.317a28.97 28.97 0 0 1 15.91-31.478l7.958-2.325 2.896-5.31a9.52 9.52 0 0 1 8.286-4.962l14.573-.11a9.52 9.52 0 0 1 7.617 3.716l5.084 6.609 21.082 7.161-3.495 75.322a5.233 5.233 0 0 1 .359 7.695c-.22.221-.393.401-.5.52-.356.505.31 4.275 1.134 7.475l1.056 4.902a3.013 3.013 0 0 0-.548 4.398l1.347 1.59a7.6 7.6 0 0 1-6.508 8.536c-19.267 2.622-68.958 9.384-69.059 9.384"
      ></path>
      <path
        fill="#2f2e41"
        d="M113.612 219.665q-.14-.307-.278-.615c.036 0 .07.006.106.007Zm-16.789-41.441a6.05 6.05 0 0 1 3.792-1.64c1.406.046 2.832 1.316 2.54 2.693a22.35 22.35 0 0 1 26.896-10.085c3.495 1.233 6.922 3.7 7.725 7.318a6.6 6.6 0 0 0 .83 2.702 3.08 3.08 0 0 0 3.283.832l.034-.01a1.028 1.028 0 0 1 1.242 1.45l-.989 1.844a7.9 7.9 0 0 0 3.776-.08 1.027 1.027 0 0 1 1.09 1.598 17.9 17.9 0 0 1-14.269 7.334c-3.951-.024-7.943-1.386-11.789-.477a10.24 10.24 0 0 0-6.887 14.375c-1.182-1.292-3.466-.986-4.674.28a6.4 6.4 0 0 0-1.4 4.906 22.8 22.8 0 0 0 2.337 7.638 22.836 22.836 0 0 1-13.537-40.678"
      ></path>
      <path fill="#ffb6b6" d="M90.84 395.068a9.77 9.77 0 0 1-2.303-13.509 9.6 9.6 0 0 1 1.092-1.298l-14.675-31.123 17.527 2.525 11.249 29.167a9.806 9.806 0 0 1-.98 13.733 9.55 9.55 0 0 1-11.91.505"></path>
      <path fill="#3f3d56" d="m86.395 378.074-23.352-52.483-.234-41.452 7.361-22.39a23.925 23.925 0 0 1 30.828-15.04l.162.058.068.158c.272.635 6.446 15.907-11.867 47.323l-3.686 21.496 12.933 49.274Z"></path>
    </svg>
    <div class="login-box" ref="loginBox">
      <el-form ref="elFormRef" :model="form" label-position="top" @submit.prevent class="formtest">
        <el-form-item label="账号" prop="username" :rules="[{ required: true, message: '请输入账号' }]">
          <el-input v-model="form.username" @keyup.enter="submitForm"
            ><template #prefix>
              <el-icon size="18rem"><UserFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码' }]">
          <el-input v-model="form.password" type="password" autocomplete="off" @keyup.enter="submitForm">
            <template #prefix>
              <el-icon size="18rem"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="login-type" label="登录类型">
          <el-radio-group v-model="form.type">
            <el-radio value="YWYH">业务用户</el-radio>
            <el-radio value="XTWH">系统维护</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button :loading="loading" type="primary" class="button" @click="submitForm">登 录</el-button>
    </div>
  </div>
</template>
<script setup name="login">
import { ref, unref, reactive, onMounted } from 'vue'
import { http, mergeObj } from '@/utils/index.js'
import { stores } from '@/stores/index.js'

// import router from '@/router'
import md5 from 'js-md5'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = stores.useUserStore()
const themeStore = stores.useThemeStore()
const menuStore = stores.useMenuStore()
const siteName = window.siteName || ''
const activeName = ref('账号密码')
const loading = ref(false)
const form = ref({
  username: '440500111',
  password: '000000',
  type: 'YWYH'
})

const elFormRef = ref()
const loginBox = ref()

onMounted(() => {})
const submitForm = () => {
  menuStore.setActiveRoute({
                label: '首页',
                path: '/home'
              })
  elFormRef.value.validate((isValid) => {
    if (isValid) {
      loading.value = true
      http('/znjszd3/ht/login', 'get', {
        username: form.value.username,
        password: md5(form.value.password).toUpperCase(),
        mtype: form.value.type
      })
        .then(async (res) => {
         
          if (res.status == 200) {
            userStore.loginUserType = form.value.type
            userStore.setToken(res.data.token)
            userStore.setUserInfor(res.data.sysLoginUser)

            //当前用户设置了主题色则应用该主题色
            const color = localStorage.getItem(userStore.userInfor.cardNumber + '_themeColor')
            if (color) {
              themeStore.setThemeColor(color)
            }
            //获取菜单数据
            await getLeftMenu()
            //业务用户登录
            if (form.value.type == 'YWYH') {
              router.push('/index')
              menuStore.setActiveRoute({
                label: '首页',
                path: '/home'
              })
              menuStore.topMenu.push({
                label: '首页',
                path: '/home'
              })
            } else {
              router.push('/equipmentManage/terminalManage')
              menuStore.setActiveRoute({
                label: '终端设备',
                path: '/equipmentManage/terminalManage'
              })
              menuStore.topMenu.push({
                label: '终端设备',
                path: '/equipmentManage/terminalManage'
              })
            }
          }
        })
        .catch((err) => {
          userStore.clearUserInfor()
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}
function getLeftMenu() {
  // loading.value = true
  return http('/znjszd3/ht/menu/getMenuList', 'get')
    .then((res) => {
      let leftMenu = res.data
      //根据接口返回的路由meta中的title值 匹配本地路由表中对应的路由,并合并两者的值
      let routes = router.options.routes.find((item) => item.path == '/index').children
      console.log(leftMenu)

      leftMenu = leftMenu.map((item) => {
        if (item.children?.length > 0) {
          return mergeRoute(item, routes)
        } else {
          const route = routes.find((route) => route.meta.title == item.meta.title)
          return mergeObj(item, route)
        }
      })

      menuStore.setLeftMenu(leftMenu)
    })
    .finally(() => {
      // loading.value = false
    })
}
//通过路由title查找对应的路由
function findByTitle(route, routes) {
  let target = {}
  todo(route.meta.title, routes)
  function todo(title, routes) {
    routes.find((item) => {
      if (item.children?.length > 0) {
        todo(title, item.children)
      } else {
        if (item.meta.title == title) {
          target = item
        }
      }
    })
  }
  return target
}
//合并路由配置项
function mergeRoute(route, routes) {
  route.children = route.children.map((subRoute) => {
    return mergeObj(subRoute, findByTitle(subRoute, routes))
  })
  return mergeObj(route, findByTitle(route, routes))
}
</script>

<style lang="scss" scoped>
.login {
  // border: 1px solid blueviolet;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
  padding: 49rem 70rem 0;

  background: #fff url(@/assets/image/login/bg.png) no-repeat center / cover;

  .app-name {
    position: absolute;
    top: 100px;
    left: 200px;
    font-size: 36px;
    font-weight: 500;
    color: #333;
    img {
      margin-right: 5px;
      width: 60px;
    }
  }
  .login-box {
    position: relative;
    margin-left: 200px;
    margin-top: -70px;
    width: 400px;
    height: 300px;
    // border: 1px solid red;
  }
  .button {
    margin-top: 20px;
    width: 100%;
    height: 48rem;

    border: none;
    background-color: #409eff;

    font-size: 20rem;
  }
  ::v-deep(.el-form-item.login-type) {
    display: flex;
    .el-form-item__label {
      padding-top: 7px;
      margin: 0;
      margin-right: 15px;
    }
  }
  ::v-deep(.el-input__inner) {
    height: 42rem;

    line-height: 40rem;
  }
  ::v-deep(.el-radio__input) {
    // background-color: #409eff;
    // border-color: #409eff;
    // .el-radio__label {
    //   color: #409eff;
    // }
    &.is-checked {
      .el-radio__inner {
        background-color: #409eff !important;
        border-color: #409eff !important;
      }
    }
  }
  ::v-deep(.el-radio__input) {
    &.is-checked + .el-radio__label {
      color: #409eff !important;
    }
  }
}
</style>
